import { Image, StyleSheet, View } from 'react-native';
import { useState } from 'react'
import { Button } from '@ui-kitten/components';
import { Link, useRouter } from 'expo-router';
import TopNavigation from '@/components/Navigation'
import { Icon, IconElement, Input, Text, Layout, Radio, RadioGroup, Avatar } from '@ui-kitten/components';
const isArr = [{ text: '是', value: 1 }, { text: '否', value: -1 }]
export default function EditorInfoScreen() {
  const router = useRouter()
  const [formInfo, setFormInfo] = useState({
    name: ''
  })
  const [selectedIndex, setSelectedIndex] = useState(0);
  const handleComplete = () => {
    router.replace('/(tabs)')
  }
  return <Layout style={{ flexDirection: 'column', flex: 1, backgroundColor: '#F3F3F3' }}>
    <TopNavigation title='编辑资料'></TopNavigation>
    <View style={{ padding: 10 }}>
      <Layout style={{ marginTop: 10, borderRadius: 10, paddingHorizontal: 15 }}>

        <Layout style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
          <Layout style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            <Text style={{ color: '#666666' }}>头像</Text>
          </Layout>
          <Layout style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            <Avatar shape='round'
              style={{ width: 46, height: 46, marginRight: 10 }}
              source={require('../assets/images/avatar.png')}></Avatar>
            <Icon
              style={{ width: 30, height: 30 }}
              fill='#8F9BB3'
              name='chevron-right'
            />
          </Layout>
        </Layout>
        <View style={{ borderBottomWidth: 1, borderColor: '#EEEEEE', borderStyle: 'solid', marginVertical: 10 }}></View>
        <Layout style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
          <Layout style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            <Text style={{ color: '#666666' }}>昵称</Text>
          </Layout>
          <Layout style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            <Text>昵****称</Text>
            <Icon
              style={{ width: 30, height: 30 }}
              fill='#8F9BB3'
              name='chevron-right'
            />
          </Layout>
        </Layout>
        <View style={{ borderBottomWidth: 1, borderColor: '#EEEEEE', borderStyle: 'solid', marginVertical: 10 }}></View>
        <Layout style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
          <Layout style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            <Text style={{ color: '#666666' }}>性别</Text>
          </Layout>
          <Layout style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            <Text>女</Text>
            <Icon
              style={{ width: 30, height: 30 }}
              fill='#8F9BB3'
              name='chevron-right'
            />
          </Layout>
        </Layout>
        <View style={{ borderBottomWidth: 1, borderColor: '#EEEEEE', borderStyle: 'solid', marginVertical: 10 }}></View>
        <Layout style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
          <Layout style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            <Text style={{ color: '#666666' }}>手机号</Text>
          </Layout>
          <Layout style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            <Text>198658963582</Text>
            <Icon
              style={{ width: 30, height: 30 }}
              fill='#8F9BB3'
              name='chevron-right'
            />
          </Layout>
        </Layout>
        <View style={{ borderBottomWidth: 1, borderColor: '#EEEEEE', borderStyle: 'solid', marginVertical: 10 }}></View>

      </Layout>

    </View>
  </Layout>
}

const styles = StyleSheet.create({
  label: {
    marginTop: 10,
    marginBottom: 5
  }
})